<template>
  <div>
    <el-form ref="form" :model="product" size="mini" label-width="0px" v-loading="listLoading">
      <el-form-item label>
        <multi-upload v-model="selectProductPics"></multi-upload>
      </el-form-item>
    </el-form>

    <van-goods-action>
      <van-button block type="primary" @click="onSubmit">保存</van-button>
    </van-goods-action>
  </div>
</template>
<script>
import multiUpload from "@/components/Upload/multiUpload";
import { updateProduct, productinfo } from "@/api/product";
export default {
  name: "projectInfo",
  components: { multiUpload },
  props: {
    value: {
      type: Object,
      default: {}
    }
  },
  watch: {
    value: {
      handler(newValue, oldValue) {
        this.product = newValue;
      },
      immediate: true
    }
  },
  data() {
    return {
      product: {},
      listLoading: false
    };
  },
  methods: {
    compiceImgs() {},
    onSubmit() {
      alert(JSON.stringify(this.product));
      this.$emit("commit", this.product);
    }
  },
  computed: {
    //商品的主图和画册图片
    selectProductPics: {
      get: function() {
        let pics = [];
        if (
          this.product.pic === undefined ||
          this.product.pic == null ||
          this.product.pic === ""
        ) {
          return pics;
        }
        pics.push(this.product.pic);
        if (
          this.product.albumPics === undefined ||
          this.product.albumPics == null ||
          this.product.albumPics === ""
        ) {
          return pics;
        }
        pics = this.product.albumPics.split(",");
        return pics;
      },
      set: function(newValue) {
        if (newValue == null || newValue.length === 0) {
          this.product.pic = null;
          this.product.albumPics = null;
        } else {
          this.product.pic = newValue[0];
          this.product.albumPics = newValue.join(",");
        }
      }
    }
  }
};
</script>